<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    计算属性：
        1.定义：没有需要的属性，需要通过“已有的属性”计算得来
        2.原理：借助Object.defineproperty()方法提供setter和getter
        3.get方法什么时候执行：
            (1)第一次读取时会调用一次（缓存）
            (2)依赖的数据修改时会调用
        4.优势：与methods相比，有缓存机制（复用），效率更高，调试方便
        5.备注：
            （1）计算属性最终会在vm上，直接读取即可
            （2）修改计算属性时，要去set里响应修改，而且set要引起计算属性依赖的数据发生改变。
-->
<body>
    <div id="root">
        姓: <input type="text" v-model="firstName"><br><br>
        名: <input type="text" v-model="lastName"><br><br>
        全名: <span>{{fullName}}</span>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
   const vm = new Vue({
        el: "#root",
        data: {
            firstName: "张",
            lastName: "三"
        },
        computed:{
            fullName:{
               get(){       //读取fullname时，调用get,其返回值作为fullName的值
                 return this.firstName + '-' + this.lastName;
               },
               set(value){  //修改fullName时，调用set，会收到修改的值
                    const arr = value.split("-");
                    this.firstName = arr[0];
                    this.lastName = arr[1];
               }
            }
        }
    })
</script>

</html>